<script lang="ts">
	import { onMount } from 'svelte';
	import { classMap } from '@smui/common/internal';

	let bubble: HTMLElement;
	let className: string = '';

	export { className as class };
	onMount(() => {});
</script>

<div class={classMap({ [className]: true, bubble_wrapper: true })}>
	<slot />
	<div bind:this={bubble} class="bubble__content hidden animate-fade-in animate-fade-out">
		<slot name="bubble" />
	</div>
</div>

<style>
	.bubble_wrapper {
		position: relative;
		display: flex;
	}

	.bubble__content {
		top: 0;
		left: 50%;
		transform: translate(-50%, -100%);
		padding: 0.5rem 1rem;
		border-radius: 0.5rem;
		background-color: #fff;
		filter: drop-shadow(0 0.5rem 1rem rgba(0, 0, 0, 0.1));
	}

	.bubble__content::before {
		content: '';
		position: absolute;
		bottom: -1em;
		left: 50%;
		transform: translateX(-50%);
		border-width: 0.5rem;
		border-style: solid;
		border-color: #fff transparent transparent transparent;
	}
</style>
